<template>
  <div class="goods_add">
    <!-- <p
      class="color-666"
      style="margin-bottom:10px"
    >商品{{maxNum}}</p> -->
    <goods-link
      v-for="(item, index) in goodsList"
      :key="item.goods_id"
      :goods-data="item"
      :show-tool="true"
      @handleDelete="deleteGoods(index)"
      @upSort="upSort(index)"
      @downSort="downSort(index)"
    ></goods-link>
    <div
      v-if="goodsList.length < maxNum"
      class="add-div"
      @click="openSelect"
    >
      <i class="el-icon-plus"></i>添加商品({{goodsList.length}}/{{maxNum}})
    </div>
    <goods-dialog
      ref="goodsDialog"
      :multiple="true"
      :maxNum="maxNum"
      :show-checked-tool="true"
      @setSelect="setSelect"
    ></goods-dialog>
  </div>
</template>

<script>
import goodsLink from "../../recommend/compoments/goodsLink";
import goodsDialog from "@/components/goodsDialog.vue";
export default {
  components: { goodsLink, goodsDialog },
  props: ['maxNum', 'goodsList'],
  data() {
    return {
    }
  },
  mounted() {
    // console.log(this.goodsList)
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return;
      }
      const list = [...this.goodsList];
      let item = list[index];
      list[index] = list[index - 1];
      list[index - 1] = item;
      this.$emit('setGoods', list);
    },
    // 降序
    downSort(index) {
      if (index === this.goodsList.length - 1) {
        return;
      }
      const list = [...this.goodsList];
      let item = list[index];
      list[index] = list[index + 1];
      list[index + 1] = item;
      this.$emit('setGoods', list);
    },
    // 删除商品
    deleteGoods(index) {
      const list = [...this.goodsList];
      list.splice(index, 1);
      this.$emit('setGoods', list);
    },
    // 设置选中
    setSelect(goodsList) {
      this.$emit('setGoods', goodsList);
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
      this.$refs.goodsDialog.selectItems = [...this.goodsList];
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
